<!--
 * @Descripttion:时间选择控件封装
 * @version:
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-06-02 09:21:14
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-04-26 10:24:14
-->
<template>
  <el-row class="timeBox">
    <el-col :span="11">
      <el-date-picker
        :value-format="types == 'month' ? 'yyyy-MM' : 'yyyy-MM-dd'"
        v-model="startTime"
        :type="types"
        :placeholder="startTimeTitle"
        :pickerOptions="pickerOptions"
        @change="getStartTimeValue"
        :append-to-body="false"
      >
      </el-date-picker>
    </el-col>
    <el-col :span="2">
      <span style="margin-left: 3px">至</span>
    </el-col>
    <el-col :span="11">
      <el-date-picker
        :value-format="types == 'month' ? 'yyyy-MM' : 'yyyy-MM-dd'"
        v-model="endTime"
        :type="types"
        :placeholder="endTimeTitle"
        :pickerOptions="pickerOptions"
        @change="getEndTimeValue"
        :append-to-body="false"
        align="right"
      >
      </el-date-picker>
    </el-col>
  </el-row>
</template>
<script>
export default {
  props: {
    dateTypes: {
      try: String,
    },
    startTime: {
      type: String,
      default() {
        return ''
      },
    },
    endTime: {
      type: String,
      default() {
        return ''
      },
    },
    startTimeTitle: {
      type: String,
      default() {
        return '开始日期'
      },
    },
    endTimeTitle: {
      type: String,
      default() {
        return '结束日期'
      },
    },
    pickerOptions: {},
  },
  data() {
    return {
      types: this.dateTypes,
      // startTime: "",
      // endTime: "",
    }
  },
  methods: {
    getStartTimeValue() {
      if (this.startTime && this.endTime) {
        if (this.startTime > this.endTime) {
          this.$message({
            message: '开始日期不能大于结束日期',
            type: 'warning',
          })
        }
      }
      this.$emit('getStartTimeValue', this.startTime)
    },
    getEndTimeValue() {
      if (this.startTime && this.endTime) {
        if (this.startTime > this.endTime) {
          this.$message({
            message: '开始日期不能大于结束日期',
            type: 'warning',
          })
        }
      }
      this.$emit('getEndTimeValue', this.endTime)
    },
  },
}
</script>
<style scoped lang="less">
.timeBox {
  /deep/ .el-input__inner,
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner,
  .searchInputWidth .el-input--suffix .el-input__inner {
    width: 105px !important;
  }
  /deep/ .el-input--prefix .el-input__inner {
    padding: 0 0 0 10px;
  }
  /deep/.el-icon-date:before {
    content: '';
  }
  /deep/ .el-icon-circle-close {
    color: #666;
    padding: 0px;
    text-align: right;
  }
}
</style>
